import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
import { Assembly, AssemblyStyles, AssemblyValidators } from '../../../fb-design.model'
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'qk-table',
    template: `
    <p-table [value]="assembly.value"  [scrollable]="true" [scrollHeight]= "'300px'" [style]="{width: assembly.attributes.width + 'px'}">
        <ng-template pTemplate="header">
            <tr>
                <th style="width:50px;padding: 0.25em 0.857em;">
                    <button type="button" pButton class="ui-button-success button-small" icon="fa fa-plus" (click)="addItem($event)"></button>
                </th>
                <th *ngFor="let col of columns" [style.width]="col.width">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr>
                <td style="width:50px;padding: 0.25em 0.857em;">
                    <button type="button" class="ui-button-danger button-small" pButton (click)="deleteItem(item, rowIndex)" icon="fa fa-times"></button>
                </td>
                <td *ngFor="let col of columns" [width]="col.width" pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData[col.header]"/>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData[col.header]}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>
    <ng-container [formGroup]="form">
        <input type="hidden" [formControlName]="assembly.id"/>
    </ng-container>
    `,
    styles: [``],
    providers: []
})
export class QkTable implements OnInit {
    @Input() assembly: Assembly;
    @Input() form: FormGroup;
    @Input() mode: number;
    columns: any[] = [
        { header: '字段A', width: '100px', displayOrder: 1 },
        { header: '字段B', width: '100px', displayOrder: 2 },
        { header: '字段C', width: '100px', displayOrder: 3 },
    ];
    constructor() {
    }

    ngOnInit() {
        if(this.mode == 2){
            if(1 == this.assembly.authCode){//只读
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'opacity': 0.5, 'background-color':'lightgray'});
            }else if(0 == this.assembly.authCode){//没有权限
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'background-color':'lightgray'});
            }
        }
        //样式属性设置
        if (this.assembly.configs && this.assembly.configs.columns) {
            this.columns = JSON.parse(this.assembly.configs.columns) || this.columns;
        } else {
            this.assembly.configs.columns = JSON.stringify(this.columns);
        }
    }

    ngDoCheck() {
        //设计模式才进行表头字段的刷新
        if (this.mode == 1) {
            if (this.assembly.configs && this.assembly.configs.columns) {
                this.columns = JSON.parse(this.assembly.configs.columns) || this.columns;
            } else {
                this.assembly.configs.columns = JSON.stringify(this.columns);
            }
        }
        this.assembly.attributes.refreshStyle();
    }

    addItem() {
        let values = this.assembly.value || [];
        let data = {};
        this.columns.forEach(e => data[e.header] = '');
        values.push(data);
        this.assembly.value = values;
    }

    deleteItem(item, rowIndex) {
        let values = this.assembly.value;
        values.splice(rowIndex, 1);
        this.assembly.value = values;
    }
}